<template>
	<view>
		<view class="page-container">
			<!-- 底层图片：对应图三的"组5@2x.png" -->
			<image src="/pages/Car/static/图层1@2x.png" class="bg-image" mode="widthFix" />

			<!-- 上层内容：领券中心标题栏 + 优惠券列表 -->
			<view class="top-content">
				<view class="navigator">领券中心</view>
				<view class="tab-bar">
					<view class="tab-item active">进行中</view>
					<view class="tab-item">已完成</view>
				</view>
				<view class="carView">
					<view class="filter-bar">
						<view class="filter-item" @tap="toggleSelect">
							<text class="filter-label">维修方式:</text>
							<view class="select-box">
								<text class="select-text">{{ selectedOption || '全部' }}</text>
								<view class="select-icon" :class="{ 'select-icon-rotate': showSelect }">
									<text>▼</text>
								</view>
								<view class="option-box" v-if="showSelect">
									<text class="option" v-for="(item, index) in selectData" :key="index"
										@tap.stop="selectOption(index)">
										{{ item }}
									</text>
								</view>
							</view>
						</view>
						<view class="reserve-btn" @tap="openDatePopup">
							<text class="date-icon">📅</text>
							<text class="date-text">预约日期</text>
						</view>
					</view>
				</view>
				
				<!-- 预约日期弹窗 -->
				<view class="popup-mask" v-if="showDatePopup" @tap="closeDatePopup">
					<view class="popup-content" @tap.stop>
						<view class="popup-header">
							<text class="popup-title">选择预约日期</text>
							<view class="popup-close" @tap="closeDatePopup">×</view>
						</view>
						<view class="time-section">
							<view class="time-item">
								<text class="time-label">开始时间</text>
								<picker 
									mode="datetime" 
									:value="startTime" 
									@change="onStartTimeChange"
									class="time-picker"
									:start="minDate"
									:end="maxDate"
								>
									<view class="time-value">{{ formatDateTime(startTime) }}</view>
								</picker>
							</view>
							<view class="time-item">
								<text class="time-label">结束时间</text>
								<picker 
									mode="datetime" 
									:value="endTime" 
									@change="onEndTimeChange"
									class="time-picker"
									:start="minDate"
									:end="maxDate"
								>
									<view class="time-value">{{ formatDateTime(endTime) }}</view>
								</picker>
							</view>
						</view>
						<view class="popup-actions">
							<button class="action-btn cancel-btn" @tap="closeDatePopup">取消</button>
							<button class="action-btn confirm-btn" @tap="confirmDate">确认</button>
						</view>
					</view>
				</view>
				
				<view class="carView">
					<view class="coupon-card">
						<text class="card-label">维修单号：</text>
						<text class="card-value">3535522</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">维修方式：</text>
						<text class="card-value">到店维修</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">预约日期：</text>
						<text class="card-value">{{ selectedDate || '2022/11/10 11:00' }}</text>
					</view>
				</view>
				<view class="carView">
					<view class="coupon-card">
						<text class="card-label">维修单号：</text>
						<text class="card-value">3535523</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">维修方式：</text>
						<text class="card-value">上门维修</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">预约日期：</text>
						<text class="card-value">2022/11/11 14:00</text>
					</view>
				</view>
				<view class="carView">
					<view class="coupon-card">
						<text class="card-label">维修单号：</text>
						<text class="card-value">3535524</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">维修方式：</text>
						<text class="card-value">到店维修</text>
					</view>
					<view class="coupon-card">
						<text class="card-label">预约日期：</text>
						<text class="card-value">2022/11/12 10:00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	
	// 响应式数据
	const showSelect = ref(false)
	const selectData = ref(['到店维修', '上门维修', '远程协助', '全部'])
	const selectedOption = ref('')
	
	// 日期弹窗相关数据
	const showDatePopup = ref(false)
	const startTime = ref('')
	const endTime = ref('')
	const selectedDate = ref('')
	const minDate = ref('')
	const maxDate = ref('')
	
	// 组件挂载后初始化日期
	onMounted(() => {
		initDates()
	})
	
	// 初始化日期范围
	const initDates = () => {
		const now = new Date()
		const year = now.getFullYear()
		const month = (now.getMonth() + 1).toString().padStart(2, '0')
		const day = now.getDate().toString().padStart(2, '0')
		const hours = now.getHours().toString().padStart(2, '0')
		const minutes = now.getMinutes().toString().padStart(2, '0')
		
		// 设置最小日期为当前时间
		minDate.value = `${year}-${month}-${day} ${hours}:${minutes}`
		
		// 设置最大日期为一年后
		const nextYear = new Date(now)
		nextYear.setFullYear(nextYear.getFullYear() + 1)
		const maxYear = nextYear.getFullYear()
		const maxMonth = (nextYear.getMonth() + 1).toString().padStart(2, '0')
		const maxDay = nextYear.getDate().toString().padStart(2, '0')
		maxDate.value = `${maxYear}-${maxMonth}-${maxDay} 23:59`
		
		// 设置默认开始时间为当前时间
		startTime.value = minDate.value
		
		// 设置默认结束时间为当前时间加1小时
		const end = new Date(now)
		end.setHours(end.getHours() + 1)
		const endHours = end.getHours().toString().padStart(2, '0')
		const endMinutes = end.getMinutes().toString().padStart(2, '0')
		endTime.value = `${year}-${month}-${day} ${endHours}:${endMinutes}`
	}
	
	// 切换下拉框显示状态
	const toggleSelect = () => {
	  showSelect.value = !showSelect.value
	}
	
	// 选择选项
	const selectOption = (index) => {
	  selectedOption.value = selectData.value[index]
	  showSelect.value = false
	}
	
	// 打开日期弹窗
	const openDatePopup = () => {
	  showDatePopup.value = true
	}
	
	// 关闭日期弹窗
	const closeDatePopup = () => {
	  showDatePopup.value = false
	}
	
	// 开始时间变化
	const onStartTimeChange = (e) => {
	  startTime.value = e.detail.value
	  
	  // 确保结束时间不早于开始时间
	  if (new Date(endTime.value) < new Date(startTime.value)) {
		const end = new Date(startTime.value)
		end.setHours(end.getHours() + 1)
		const year = end.getFullYear()
		const month = (end.getMonth() + 1).toString().padStart(2, '0')
		const day = end.getDate().toString().padStart(2, '0')
		const hours = end.getHours().toString().padStart(2, '0')
		const minutes = end.getMinutes().toString().padStart(2, '0')
		endTime.value = `${year}-${month}-${day} ${hours}:${minutes}`
	  }
	}
	
	// 结束时间变化
	const onEndTimeChange = (e) => {
	  endTime.value = e.detail.value
	  
	  // 确保结束时间不早于开始时间
	  if (new Date(endTime.value) < new Date(startTime.value)) {
		uni.showToast({
		  title: '结束时间不能早于开始时间',
		  icon: 'none',
		  duration: 2000
		})
		// 恢复为之前的值
		const end = new Date(startTime.value)
		end.setHours(end.getHours() + 1)
		const year = end.getFullYear()
		const month = (end.getMonth() + 1).toString().padStart(2, '0')
		const day = end.getDate().toString().padStart(2, '0')
		const hours = end.getHours().toString().padStart(2, '0')
		const minutes = end.getMinutes().toString().padStart(2, '0')
		endTime.value = `${year}-${month}-${day} ${hours}:${minutes}`
	  }
	}
	
	// 确认日期选择
	const confirmDate = () => {
	  // 将选择的日期时间应用到第一个订单卡片
	  selectedDate.value = formatDateTime(startTime.value)
	  console.log('选择的开始时间:', startTime.value)
	  console.log('选择的结束时间:', endTime.value)
	  closeDatePopup()
	  // 这里可以添加其他逻辑，比如根据选择的日期筛选订单
	}
	
	// 格式化日期时间显示
	const formatDateTime = (dateTimeStr) => {
	  if (!dateTimeStr) return '请选择时间'
	  
	  try {
		// 处理日期时间字符串，确保能被正确解析
		const dateStr = dateTimeStr.replace(/-/g, '/')
		const date = new Date(dateStr)
		
		// 检查日期是否有效
		if (isNaN(date.getTime())) {
		  return '日期格式错误'
		}
		
		const year = date.getFullYear()
		const month = (date.getMonth() + 1).toString().padStart(2, '0')
		const day = date.getDate().toString().padStart(2, '0')
		const hours = date.getHours().toString().padStart(2, '0')
		const minutes = date.getMinutes().toString().padStart(2, '0')
		
		return `${year}/${month}/${day} ${hours}:${minutes}`
	  } catch (error) {
		console.error('日期格式化错误:', error)
		return '日期格式错误'
	  }
	}
</script>

<style scoped>
	/* 父容器：约束子元素定位范围 */
	.page-container {
		position: relative;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	/* 底层图片：层级最低，作为背景 */
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}

	/* 上层内容：层级高于背景图，承载文字和按钮 */
	.top-content {
		position: relative;
		z-index: 2;
		box-sizing: border-box;
		padding-top: 40rpx;
	}

	.navigator {
		display: flex;
		justify-content: center;
		color: white;
		margin-bottom: 40rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.carView {
		background-color: #fff;
		margin: 30rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.tab-bar {
		display: flex;
		color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		margin: 0 20rpx 30rpx;
		background-color: rgba(255, 255, 255, 0.2);
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.tab-item.active {
		font-weight: bold;
		/* 白色下划线样式 */
		border-bottom: 4rpx solid #fff;
		color: #fff;
		font-weight: bold;
	}

	/* 筛选栏样式调整 */
	.filter-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.filter-item {
		display: flex;
		align-items: center;
		position: relative;
	}

	.filter-label {
		color: #333;
		font-size: 28rpx;
		margin-right: 20rpx;
		font-weight: 500;
	}

	.select-box {
		display: flex;
		align-items: center;
		background-color: #1677ff;
		color: #fff;
		padding: 12rpx 24rpx;
		border-radius: 8rpx;
		position: relative;
		min-width: 200rpx;
	}

	.select-text {
		color: #fff;
		font-size: 28rpx;
		margin-right: 15rpx;
	}

	.select-icon {
		color: #fff;
		font-size: 24rpx;
		transition: transform 0.3s;
	}

	.select-icon-rotate {
		transform: rotate(180deg);
	}

	.option-box {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: white;
		border: 2rpx solid #e9ecef;
		border-top: none;
		border-radius: 0 0 12rpx 12rpx;
		overflow: hidden;
		z-index: 100;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.option {
		display: block;
		padding: 20rpx 14rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f1f3f4;
		background: white;
	}

	.option:last-child {
		border-bottom: none;
	}

	.option:active {
		background: #f8f9fa;
	}

	.reserve-btn {
		display: flex;
		align-items: center;
		color: #1677ff;
		font-size: 28rpx;
		font-weight: 500;
		padding: 12rpx;
		border-radius: 8rpx;
	}

	.date-icon {
		margin-right: 8rpx;
		font-size: 28rpx;
	}

	/* 优惠券卡片样式 */
	.coupon-card {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding: 15rpx 0;
		border-bottom: 1rpx solid #f1f3f4;
	}

	.coupon-card:last-child {
		margin-bottom: 0;
		border-bottom: none;
	}

	.card-label {
		color: #666;
		font-size: 28rpx;
		width: 180rpx;
	}

	.card-value {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		flex: 1;
	}
	
	/* 弹窗样式 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}
	
	.popup-content {
		background: white;
		border-radius: 20rpx;
		width: 600rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
	}
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.popup-close {
		font-size: 40rpx;
		color: #999;
		line-height: 1;
	}
	
	.time-section {
		margin-bottom: 40rpx;
	}
	
	.time-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 10rpx;
	}
	
	.time-item:last-child {
		margin-bottom: 0;
	}
	
	.time-label {
		font-size: 28rpx;
		color: #333;
		width: 160rpx;
		font-weight: 500;
	}
	
	.time-picker {
		flex: 1;
	}
	
	.time-value {
		font-size: 28rpx;
		color: #1677ff;
		padding: 15rpx 20rpx;
		background: white;
		border-radius: 8rpx;
		border: 1rpx solid #e0e0e0;
		text-align: center;
	}
	
	.popup-actions {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}
	
	.action-btn {
		flex: 1;
		padding: 20rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		border: none;
	}
	
	.cancel-btn {
		background: #f0f0f0;
		color: #666;
	}
	
	.confirm-btn {
		background: #1677ff;
		color: white;
	}
</style>